<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>node-test</title>
  <style>
    .flex {
      display: flex !important;
      justify-content: center;
      align-items: center;
    }

    .flex1 {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .flex-l {
      justify-content: flex-start !important;
    }
  </style>
</head>

<body>
  <div class="flex flex-l">
    <div class="label-cls">是否统计：</div>
    <div class="val-cls">
      <label for="ksf">ksf
        <input type="checkbox" id="ksf">
      </label>

      <label for="ppv">ppv
        <input type="checkbox" id="ppv">
      </label>
    </div>
  </div>

  <p>
    <button onclick="extractChineseAndOutputExcel(1)">多语言版本：pc端统计</button>
  </p>
  <p>
    <button onclick="extractChineseAndOutputExcel(2)">多语言版本：app端统计</button>
  </p>
  <!-- <p>
    <button onclick="translate2Eng()">翻译为英文</button>
  </p>
  <p>
    <input type="file" onchange="readFileFn(this.files[0])" placeholder="选择翻译的excel文件" /><br>
  </p>
  <p>
    <button onclick="writeFn()">生成excel文件</button>
  </p> -->

  <!-- <script src="./utils/index.js"></script> -->
  <script src="https://cdn.sheetjs.com/xlsx-0.19.1/package/dist/xlsx.full.min.js"></script>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  <script>


    const BAIDI_apiUrl = 'http://api.fanyi.baidu.com/api/trans/vip/translate';
    const BAIDI_appid = "20241218002231212" // APP ID
    const BAIDI_secret = "JpkRUxu42G5coenLP9se" // 密钥

    // 抽取中文并输出excel
    function extractChineseAndOutputExcel (type) {

      const ksfDom = document.getElementById('ksf')
      const ppvDom = document.getElementById('ppv')
      const ksfVal = ksfDom.checked ? 1 : 0
      const ppvVal = ppvDom.checked ? 1 : 0

      request({
        url: `/extractChinese?type=${type}&ksf=${ksfVal}&ppv=${ppvVal}`
      }, function (err, data) {
        // debugger
        if (err) {
          console.error('Error:', err);
        } else {
          console.log('Data:', data);
        }
      })
    }

    // 读取xlsx文件
    function readFileFn (file) {
      console.log('XLSX', XLSX);
      let reader = new FileReader();
      reader.onload = function (e) {
        parseFn(e.target.result);
      };
      reader.readAsArrayBuffer(file);

      // request({
      //   url: '/readFileFn'
      // }, function (err, data) {
      //   // debugger
      //   if (err) {
      //     console.error('Error:', err);
      //   } else {
      //     console.log('Data:', data);
      //   }
      // })
    }

    // 从文件数据中解析出excel内容
    function parseFn (data) {
      const workbook = XLSX.read(data); // 从原始数据获取工作簿
      // 后端使用可以使用 readFile() 方法直接读取文件
      var first_sheet_name = workbook.SheetNames[0]; // 获得第一个工作表名称
      const worksheet = workbook.Sheets[first_sheet_name]; // 获取工作表

      // console.log(worksheet); // 读取并打印A1端元格数据
      // console.log(worksheet['A1']); // 读取并打印A1端元格数据
      // console.log(worksheet['!merges']); // 所有合并单元格信息数组
      // console.log(worksheet['!ref']); // 输出当前工作表使用的范围

      const excelArr = []
      const chineseArr = []
      // const obj = []
      // 正则剔除字母
      const arr1 = worksheet['!ref'].split(':').map(o => o.replace(/[A-Za-z]+/g, ''))
      // console.log('arr1', arr1);
      if (arr1.length > 1) {
        // debugger
        for (let i = arr1[0]; i <= arr1[1]; i++) {
          const name = 'A' + i;
          const value = worksheet[name].v;
          // console.log(name, value); // 读取并打印A1端元格数据
          const obj = {
            name,
            value
          }
          chineseArr.push(obj)
          excelArr.push([value])
        }
      } else { // 只有一列有值
        const name = 'A1';
        const value = worksheet[name].v;
        // obj[name] = value;
        const obj = {
          name,
          value
        }
        chineseArr.push(obj)
        excelArr.push([value])
      }

      console.log('chineseArr', chineseArr);
      // 翻译成英文
      // debugger
      recursionFn(chineseArr, 0, excelArr, () => {
        // debugger
        console.log('excelArr', excelArr);
        writeFn(excelArr)
      })
    }

    function recursionFn (arr, index, excelArr, fn) {
      if (index < arr.length) {
        const item = arr[index]
        const value = item.value
        // debugger
        translate2Eng(value, (res) => {
          const val = res.trans_result[0].dst
          // debugger
          item.eng = val
          excelArr[index].push(val)
          setTimeout(() => {
            recursionFn(arr, ++index, excelArr, fn)
          }, 1000);
        })
      } else {
        // debugger
        fn && fn()
      }
    }

    // 翻译为英文
    function translate2Eng (q, fn) {
      q = q || '代码高亮' + Math.floor(Math.random() * 10)
      const salt = Math.random();
      const sign = md5(BAIDI_appid + q + salt + BAIDI_secret);
      const data = {
        q,
        from: 'zh',
        to: 'en',
        salt,
        appid: BAIDI_appid,
        sign,
      };

      // debugger
      $.ajax({
        url: BAIDI_apiUrl,
        type: 'get',
        dataType: 'jsonp',
        data,
        success: function (res) {
          // console.log(data);
          // debugger
          fn && fn(res)
        },
        error: function (err) {
          console.error(err);
          // debugger
        }
      });
    }


    // 生成excel文件
    function writeFn (data) {
      const opts = {}; // 写入选项
      const filename = generationFileName(); // 写入文件名
      data = data || [
        ['姓名', '年龄', '性别'],
        ['张三', 20, '男'],
        ['王五', 30, '男']
      ]; // 写入数据

      let workbook = XLSX.utils.book_new(); // 新建工作簿
      // let workbook = XLSX.utils.table_to_book(table); // 从dom的table元素新建工作簿
      // debugger

      // 也可以直接操作现有的工作簿

      let worksheet = XLSX.utils.aoa_to_sheet(data); // 从二维数组新建工作表
      // let worksheet = XLSX.utils.json_to_sheet(data); // 从json数据新建工作表
      // let worksheet = XLSX.utils.table_to_sheet(table); // 从dom的table元素新建工作表

      XLSX.utils.book_append_sheet(workbook, worksheet, "sheet1"); // 将工作表添加到工作簿

      XLSX.utils.sheet_add_aoa(worksheet, data, { origin: "A1" }); // 将二维数组添加到工作表
      // XLSX.utils.sheet_add_json(worksheet, data, { origin: "A1" }); // 将json数据添加到工作表
      // XLSX.utils.sheet_add_dom(worksheet, table, { origin: "A1" }); // 将dom的table元素添加到工作表

      // // 合并单元格就是设置其合并的信息
      // if (!worksheet["!merges"]) worksheet["!merges"] = [];
      // worksheet["!merges"].push(XLSX.utils.decode_range("B3:D4"));

      // let html = XLSX.utils.sheet_to_html(worksheet); // 将工作表内容转成html
      // let json = XLSX.utils.sheet_to_json(worksheet); // 将工作表内容转成json
      // let csv = XLSX.utils.sheet_to_csv(worksheet); // 将工作表内容转成csv格式文本
      // let txt = XLSX.utils.sheet_to_txt(worksheet); // 将工作表内容转成UTF16文本

      // let data = XLSX.write(workbook, opts); // 生成文档数据
      XLSX.writeFile(workbook, filename, opts); // 生成文档文件，浏览器环境中将直接下载
      // XLSX.writeFileAsync(filename, workbook, opts, cb); // 生成文档文件，浏览器环境中将直接下载
      // XLSX.writeFileXLSX(workbook, filename, opts); // 生成.xlsx格式文件，浏览器环境中将直接下载

    }

    function generationFileName () {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      // const second = date.getSeconds();
      const dateTime = `${year}-${month}-${day}_${hour}-${minute}`;
      const fileName = `${dateTime}.xlsx`;
      return fileName
    }


    // 创建一个名为ajax的函数，接受两个参数：config和callback
    function request (config, callback) {
      // 创建一个新的XMLHttpRequest对象
      var xhr = new XMLHttpRequest();

      // 配置请求类型，默认为GET
      var method = config.method || 'GET';

      // 配置请求的URL
      var url = config.url;

      // 配置请求头，如果是POST请求，需要设置Content-Type
      var headers = config.headers || {};
      if (method === 'POST' && !headers['Content-Type']) {
        headers['Content-Type'] = 'application/x-www-form-urlencoded';
      }

      // 配置请求的超时时间，默认为0（无超时）
      var timeout = config.timeout || 0;

      // 配置请求的参数，如果是GET请求，将参数附加到URL上
      var params = config.params || {};
      if (method === 'GET' && Object.keys(params).length > 0) {
        url += '?' + Object.keys(params).map(function (key) {
          return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
        }).join('&');
      }

      // 初始化请求
      xhr.open(method, url, true);

      // 设置请求头
      Object.keys(headers).forEach(function (key) {
        xhr.setRequestHeader(key, headers[key]);
      });

      // 设置超时
      xhr.timeout = timeout;

      // 设置响应类型为JSON
      xhr.responseType = 'json';

      // 定义请求完成的处理函数
      xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
          // 请求成功，调用回调函数，并传入响应数据
          callback(null, xhr.response);
        } else {
          // 请求失败，调用回调函数，并传入错误信息
          callback(new Error(xhr.statusText), null);
        }
      };

      // 定义请求失败的处理函数
      xhr.onerror = function () {
        callback(new Error('Network error'), null);
      };

      // 定义请求超时的处理函数
      xhr.ontimeout = function () {
        callback(new Error('Request timed out'), null);
      };

      // 发送请求，如果是POST请求，需要传入参数
      xhr.send(method === 'POST' ? params : null);
    }
  </script>
</body>

</html>